<template>
    <div class="container">
        <div class="form-box">
            <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="期望时薪" prop="hourSalary">
                    <el-input-number :min="1" v-model="form.hourSalary"></el-input-number>&nbsp;&nbsp;元
                </el-form-item>
                <el-form-item label="期望日薪" prop="daySalary">
                    <el-input-number :min="1" v-model="form.daySalary"></el-input-number>&nbsp;&nbsp;元
                </el-form-item>
                <el-form-item label="期望月薪" prop="monthSalary">
                    <el-input-number :min="1" v-model="form.monthSalary"></el-input-number>&nbsp;&nbsp;元
                </el-form-item>
                <el-form-item label="民族" prop="nation">
                    <el-input v-model="form.nation"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="form.gender">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input-number :min="1" v-model="form.age"></el-input-number>
                </el-form-item>
                <el-form-item label="身高" prop="height">
                    <el-input-number :min="1" v-model="form.height"></el-input-number>
                </el-form-item>
                <el-form-item label="婚姻状况" prop="maritalStatus">
                    <el-radio-group v-model="form.maritalStatus">
                        <el-radio :label="0">未婚</el-radio>
                        <el-radio :label="1">已婚</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="服务类型" prop="typeIdList">
                    <el-checkbox-group v-model="form.typeIdList">
                        <el-checkbox v-for="item in typeOptions" :label="item.id" name="typeIdList">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="工作状态" prop="state">
                    <el-radio-group v-model="form.state">
                        <el-radio :label="1">空闲</el-radio>
                        <el-radio :label="2">繁忙</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="掌握语言" prop="language">
                    <el-input v-model="form.language"></el-input>
                </el-form-item>
                <el-form-item label="技能" prop="skill">
                    <el-input v-model="form.skill"></el-input>
                </el-form-item>
                <el-form-item label="现居住地">
                    <address-cascade-selector @selectedAddress="selectedAddress" ref="editAddressRef"></address-cascade-selector>
                    <el-input v-model="form.detail" placeholder="详细地址" style="margin-top: 10px"></el-input>
                </el-form-item>
                <el-form-item label="个人介绍" prop="introduction">
                    <el-input type="textarea" rows="5" v-model="form.introduction"></el-input>
                </el-form-item>
                <el-form-item label="图片信息" prop="url">
                    <image-uploader @imageChange="handleImageChange" ref="imageUploaderRef"></image-uploader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(formRef)" :disabled="buttonDisabled">添加</el-button>
                    <el-button @click="onReset(formRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts" name="baseform">
    import {nextTick, reactive, ref} from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import AddressCascadeSelector from '../components/AddressCascadeSelector.vue'
import ImageUploader from '../components/ImageUploader.vue'
import {addHousekeeper, getTypeOptions} from "../api/index";

const rules: FormRules = {
    name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
    hourSalary: [{ required: true, message: '请填写期望时薪', trigger: 'blur' }],
    daySalary: [{ required: true, message: '请填写期望日薪', trigger: 'blur' }],
    monthSalary: [{ required: true, message: '请填写期望月薪', trigger: 'blur' }],
    nation: [{ required: true, message: '请填写民族', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    age: [{ required: true, message: '请填写年龄', trigger: 'blur' }],
    height: [{ required: true, message: '请填写身高', trigger: 'blur' }],
    maritalStatus: [{ required: true, message: '请选择婚姻状况', trigger: 'blur' }],
    typeIdList: [{ required: true, message: '请选择服务类型', trigger: 'blur' }],
    state: [{ required: true, message: '请选择工作状态', trigger: 'blur' }],
    language: [{ required: true, message: '请填写掌握语言', trigger: 'blur' }],
    skill: [{ required: true, message: '请填写技能', trigger: 'blur' }],
    province: [{ required: true, message: '请填写所在省份', trigger: 'blur' }],
    city: [{ required: true, message: '请填写所在城市', trigger: 'blur' }],
    town: [{ required: true, message: '请填写所在县区', trigger: 'blur' }],
    detail: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
    introduction: [{ required: true, message: '请填写个人介绍', trigger: 'blur' }],
};
const formRef = ref<FormInstance>();
const form = reactive({
    name: '',
    maritalStatus: 0,
    height: null,
    age: null,
    state: 1,
    language: '',
    skill: '',
    introduction: '',
    nation: '',
    province: '',
    city: '',
    town: '',
    detail: '',
    typeIdList: [],
    imageUrlList: []
});
const typeOptions = ref([]);
const imageList = ref([]);
const buttonDisabled = ref(false);

const getServiceTypeOptions = async () => {
    const res = await getTypeOptions({state: 1});
    if (res) {
        typeOptions.value = res.data;
    }
};
const initData = async () => {
    await getServiceTypeOptions();
};
initData();

const handleImageChange = (images:any) => {
    console.log("handleImageChange", images);
    imageList.value = images;
};
const selectedAddress = (address: any) => {
    console.log("selectedAddress", address);
    form.province = address.province;
    form.city = address.city;
    form.town = address.town;
};
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
    // 表单校验
    if (!formEl) return;
    buttonDisabled.value = true;
    formEl.validate(async (valid) => {
        if (valid) {
            if (imageList.value) {
                form.imageUrlList = [];
                imageList.value.forEach(e => {
                    form.imageUrlList.push(e.url);
                });
            }
            console.log("addHousekeeper", form);
            const res = await addHousekeeper(form);
            if (res) {
                onReset(formEl);
                ElMessage.success('添加成功！');
            }
        } else {
            buttonDisabled.value = false;
            return false;
        }
        buttonDisabled.value = false;
    });
};
const editAddressRef = ref();
const imageUploaderRef = ref();
// 重置
const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    editAddressRef.value.initShow('', '', '');
    imageUploaderRef.value.onInitImage([]);
};
</script>
